<template>
  <div class="cesium-draw">
    <div id="cesium-drawer" />
    <div class="mouse-postion">{{ nowPostion.wgs84 }}</div>
    <div id="menu">
      <p><button @click="setvisible('position')">定位</button></p>
      <p><button @click="setvisible('add')">添加</button></p>
      <p><button @click="setvisible('fill')">填充</button></p>
      <p><button @click="setvisible('boeder')">边框</button></p>
      <p><button @click="setvisible('clear')">删除</button></p>
    </div>
  </div>
</template>

<script>
//参考：Cesium深入浅出之图层管理器 https://blog.csdn.net/fywindmoon/article/details/113747843
import { DownOutlined, EditOutlined } from '@ant-design/icons-vue';
import { defineComponent, ref, watch } from 'vue';
import * as Cesium from '@cesium/Source/Cesium.js';
import MousePosition from '@functional/utils/mousePosition';
import EllipseGeometryLibraryEx from './lib/EllipseGeometryLibraryEx.js';
import PrimitivePolyline from './lib/PrimitivePolyline.js';
import PrimitiveTriangles from './lib/PrimitiveTriangles.js';

export default defineComponent({
  name: 'fan', // 扇形
  components: { DownOutlined, EditOutlined },
  setup() {
    return {
      viewer: null
    };
  },
  data() {
    return {
      nowPostion: {},
      primitiveFill: undefined,
      primitiveBorder: undefined,
    };
  },
  computed: {},
  watch: {},
  mounted() {
    this.initViewer();
  },
  beforeUnmount() {
    if (this.viewer) {
      this.viewer.destroy();
      this.viewer = null;
    }
  },
  methods: {
    onViewerInited(viewer) {
      let vm = this;
      new MousePosition(viewer, pos => {
        vm.nowPostion = pos;
      });
    },

    initViewer() {
      let vm = this;
      Cesium.Ion.defaultAccessToken = $accessToken.default;
      let osm = new Cesium.OpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
      });
      let viewer = new Cesium.Viewer('cesium-drawer', {
        imageryProvider: osm,
        contextOptions: {
          webgl: {
            alpha: true
          }
        },
        selectionIndicator: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        fullscreenButton: false,
        shouldAnimate: true
      });

      this.viewer = viewer;
      this.onViewerInited(viewer);

      this.initEffects();

      // this.viewer.flyTo(this.viewer.entities);
    },

    setvisible(value) {
      const viewer = this.viewer;

      var lat = 42.006;
      var lon = 128.055;

      // var primitiveFill;
      // var primitiveBorder;
      var ellipsoid = Cesium.Ellipsoid.WGS84;

      // function setvisible(value) {
      switch (value) {
        case 'position':
          viewer.camera.setView({
            destination: Cesium.Cartesian3.fromDegrees(lon, lat, 30000)
          });
          break;
        case 'add':
          var center = new Cesium.Cartographic(Cesium.Math.toRadians(lon), Cesium.Math.toRadians(lat), 1500);
          var eopt = {};
          eopt.semiMinorAxis = 9000;
          eopt.semiMajorAxis = 9000;
          eopt.rotation = Math.PI; //Math.PI;//逆时针转
          eopt.center = Cesium.Cartesian3.fromRadians(center.longitude, center.latitude, center.height);
          eopt.granularity = (Math.PI * 2.0) / parseFloat(180);
          eopt.angle = (Math.PI * 3.0) / 4.0; //正南为0度
          var ellipse = EllipseGeometryLibraryEx.computeSectorEdgePositions(eopt);
          var raiseopt = {};
          raiseopt.ellipsoid = ellipsoid;
          raiseopt.height = center.height;
          raiseopt.extrudedHeight = 0;
          ellipse.outerPositions = EllipseGeometryLibraryEx.raisePositionsToHeight(ellipse.outerPositions, raiseopt, false);
          //转换
          var cartesians = [];
          for (var i = 0; i < ellipse.outerPositions.length; i += 3) {
            var cartesianTemp = new Cesium.Cartesian3(ellipse.outerPositions[i], ellipse.outerPositions[i + 1], ellipse.outerPositions[i + 2]);
            cartesians.push(cartesianTemp);
          }
          //填充
          var cartesiansPointsFill = [];
          var colorsFill = [];
          for (var i = 1; i < cartesians.length; i++) {
            cartesiansPointsFill.push(cartesians[i - 1]);
            cartesiansPointsFill.push(cartesians[i]);
            cartesiansPointsFill.push(eopt.center);
            colorsFill.push(0);
            colorsFill.push(0);
            colorsFill.push(1);
            colorsFill.push(1);
            colorsFill.push(0);
            colorsFill.push(0);
            colorsFill.push(1);
            colorsFill.push(1);
            colorsFill.push(0);
            colorsFill.push(0);
            colorsFill.push(1);
            colorsFill.push(1);
          }
          this.primitiveFill = new PrimitiveTriangles({
            viewer: viewer,
            Cartesians: cartesiansPointsFill,
            Colors: colorsFill
          });
          //边框
          var cartesiansPointsBorder = [];
          var colorsBorder = [];
          cartesiansPointsBorder.push(eopt.center);
          cartesiansPointsBorder.push(cartesians[0]);
          colorsBorder.push(1);
          colorsBorder.push(0);
          colorsBorder.push(0);
          colorsBorder.push(1);
          colorsBorder.push(1);
          colorsBorder.push(0);
          colorsBorder.push(0);
          colorsBorder.push(1);
          for (var i = 1; i < cartesians.length; i++) {
            cartesiansPointsBorder.push(cartesians[i - 1]);
            cartesiansPointsBorder.push(cartesians[i]);
            cartesiansPointsBorder.push(eopt.center);
            cartesiansPointsBorder.push(cartesians[i]);
            colorsBorder.push(1);
            colorsBorder.push(0);
            colorsBorder.push(0);
            colorsBorder.push(1);
            colorsBorder.push(1);
            colorsBorder.push(0);
            colorsBorder.push(0);
            colorsBorder.push(1);
            colorsBorder.push(1);
            colorsBorder.push(0);
            colorsBorder.push(0);
            colorsBorder.push(1);
            colorsBorder.push(1);
            colorsBorder.push(0);
            colorsBorder.push(0);
            colorsBorder.push(1);
          }
          this.primitiveBorder = new PrimitivePolyline({
            viewer: viewer,
            Cartesians: cartesiansPointsBorder,
            Colors: colorsBorder
          });

          break;
        case 'fill':
          if (this.primitiveFill) {
            this.primitiveFill.primitive.show = !this.primitiveFill.primitive.show;
          }
          break;
        case 'boeder':
          if (this.primitiveBorder) {
            this.primitiveBorder.primitive.show = !this.primitiveBorder.primitive.show;
          }
          break;
        case 'clear':
          if (this.primitiveFill) {
            this.primitiveFill.remove();
          }
          if (this.primitiveBorder) {
            this.primitiveBorder.remove();
          }
          break;
      }
      // }
    },

    initEffects() {
      const viewer = this.viewer;

      var lat = 42.006;
      var lon = 128.055;
      //取消双击事件
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
      //设置homebutton的位置
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(lon - 1, lat - 1, lon + 1, lat + 1); //Rectangle(west, south, east, north)
      //设置初始位置
      viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(lon, lat, 300000)
      });
      //开启深度检测
      viewer.scene.globe.depthTestAgainstTerrain = true;

      this.setvisible('add');
    }
  }
});
</script>

<style scoped lang="less">
.cesium-draw {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  color: white;
  font-size: 14px;

  #cesium-drawer {
    width: 100%;
    height: 100%;
    overflow: hidden;
    :deep(.cesium-viewer-bottom) {
      display: none !important;
    }
  }

  .mouse-postion {
    position: absolute;
    bottom: 10px;
    right: 10px;
    font-size: 14px;
    padding: 8px 12px;
    line-height: 16px;
    color: white;
    z-index: 9999;
    background-color: rgba(40, 48, 60, 1);
    border-radius: 3px;
    opacity: 0.8;
  }
}

.chart-container {
  position: absolute;
  bottom: 7px;
  left: 7px;
  background-color: rgba(0, 0, 0, 0.5);

  #profileChart {
    width: 600px;
    height: 300px;
  }
}
#canvas-a {
  top: 10px;
  display: none;
}

#canvas-b {
  top: 120px;
  display: none;
}
#menu {
  position: absolute;
  top: 80px;
  left: 10px;
  z-index: 999;

  button {
    background-color: rgba(0, 0, 0, 0.75);
    border-color: rgba(0, 0, 0, 0);
    cursor: pointer;

    transition: all 500ms;

    &:hover {
      opacity: 0.75;
    }
  }
}
</style>
